<template>
	<view>
		<!-- <view class="card" v-if="successInfo == 2">
			<view class="line">
				<view class="img"></view>
				<view class="">
					<view class="">已完成</view>
					<view class="num">订单已完成</view>
				</view>
			</view>
		</view> -->

		<view class="info">
			<view class="info_box">
				<view class="image">
					<image :src="list.img" alt="" style="width: 100%;height: 100%;"/>
				</view>
				<view class="title">

					<view class="name">{{list.storeName}}</view>
					<view style="padding: 5px 0;">
						{{list.content}}
					</view>
					
				</view>
			</view>
			<view class="actually">
				<view class="">{{$t("order.actual-payment")}}</view>
				<view class="price">{{list.price}}</view>
			</view>
		</view>

		<view class="address_btn" v-if="successInfo == 1">
			<view class="">
				<span>{{$t("order.delivery-addr")}}</span>

			</view>
			<view class="">
				<button style="width: 80px;border: 1px solid #ccc;" @click="exchange">>{{$t("public.change")}}</</button>

			</view>

		</view>

		<view class="card_detail" v-if="successInfo == 1">

			<view class="txt_btn">
				<view class="tit">
					<view class="txt_left">{{$t("order.no")}} :</view>
					<view class="">12312313</view>
				</view>
				<button type="primary" size="mini">{{$t("public.copy-button")}}</button>
			</view>

			<view class="tit">
				<view class="txt_left">{{$t("order.place-data")}} :</view>
				<view class="">12312313</view>
			</view>
			<view class="tit">
				<view class="txt_left">1313</view>
				<view class="">12312313</view>
			</view>
		</view>



		<view class="address_btn" v-if="successInfo == 2">
			<view class="">
				<span>{{$t("order.delivery-addr")}}</span>

			</view>
			<view class="">
				<button style="width: 80px;border: 1px solid #ccc;" @click="exchange">{{isAddress==false?$t("public.add"):$t("public.change")}}</button>

			</view>

		</view>

<view class="" v-if="this.isAddress">
	

		<view class="card_detail" v-if="successInfo == 2">
			<span>{{$t("order.delivery-info")}}</span>
			<view class="txt_btn">
				<view class="tit">
					<view class="txt_left">{{$t("order.delivery-people")}} </view>
					<view class="">{{addressList.realName}}</view>
				</view>
				
			</view>

			<view class="tit" style="display: flex;justify-content: space-between;align-items: center">
				<view class="" style="display:flex">
					
				
				<view class="txt_left">{{$t("order.contact")}} </view>
				<view class="">{{addressList.phone}}</view>
				</view>
				<view class="">
					<button type="primary" size="mini" @click="copy">{{$t('public.copy-button')}}</button>
				</view>
				
			</view>
			<view class="tit">
				<view class="txt_left">{{$t("order.delivery-addr")}} </view>
				<view class="">{{addressList.province}}{{addressList.city}}{{addressList.detail}}</view>
			</view>
		</view>
</view>
<view class="" v-else style="padding: 15px;font-weight: bold;">
	{{$t('public.tips')}}:{{$t('order.add.address')}}
</view>
		<view class="card_detail" v-if="successInfo == 3">
			<span>{{$t("order.pay-type")}}</span>
			<view class="txt_btn">
				<view class="tit">
					<view class="txt_left">收款网络 :</view>
					<view class="">12312313</view>
				</view>
				<button type="primary" size="mini">复制</button>
			</view>

			<view class="tit">
				<view class="txt_left">钱包地址 :</view>
				<view class="">12312313</view>
			</view>
			<view class="tit">
				<view class="txt_left">钱包二维码 :</view>
				<view class="pay_img">
					<img src="" alt="" />
				</view>
			</view>
		</view>







		<view class="bottom">
			<view class="bottom_btn" v-if="successInfo == 2">
				<!-- <view class=""></view> -->

				<button type="warn" class="btn" @click="submit">{{$t("mail.product.confirm-pay")}}</button>
			</view>

			<view class="bottom_btn" v-if="successInfo == 1">
				<button type="primary" class="btn">{{$t("order.commit.voucher")}}</button>
				<button type="primary" class="btn" @click="pay">{{$t("public.payment")}}</button>
			</view>

			<view class="bottom_btn" v-if="successInfo == 3">
				<button type="primary" class="btn">{{$t("order.commit.voucher")}}</button>
				<!-- <button type="primary" class="btn" @click="pay">立即支付</button> -->
			</view>
		</view>


		<u-popup v-model="showPopup" mode="bottom" :closeable=true :mask-close-able=false height="450px">
			<view class="record_tit">{{$t("mail.product.tips.pay-password")}}</view>
			<u-message-input style="margin-top: 45px;" :maxlength="6" @finish="finishNew" @change="change"
				:focus="true">
			</u-message-input>
		</u-popup>



	</view>
</template>

<script>
	import {
		getAddressList
	} from '@/api/user.js';
	import {
		recordPwd,
		submitInfo
	} from '@/api/new.js'
	export default {

		data() {
			return {
				showPopup: false,
				successInfo: 1,
				list: {},
				page: 1,
				limit: 20,
				addressList: {},
				oldPwd: '',
isAddress:false

			}
		},
		onLoad(e) {
			this.list = e ? e : {},
				this.successInfo = e ? 2 : 1

			console.log(this.list,'list');
			this.ch = uni.getStorageSync('AppLocale').code

		},
		onShow() {
			this.getAddress()
			// console.log(this.list, 'eeeeee', this.addressList);
			uni.setNavigationBarTitle({
				title: this.$t('mail.product.order-commit')
			})
			
		},
		methods: {
			copy() {
			
				let that = this
				uni.setClipboardData({
					data: that.addressList.phone,
					success() {
						that.$util.Tips({
							title: this.$t("public.tips.copy")
						})
					}
				})
			
			
			},
			change(e) {

			},
			finishNew(e) {
				let that = this
				this.oldPwd = e
				uni.showLoading({
					title: this.$t('public.tips.loading')
				});
				let data = {
					oldPwd: e
				}
				recordPwd(data).then(res => {

					uni.hideLoading();
					let data = {
						productId: that.list.id,
						addressId: that.addressList.id
					}
					submitInfo(data).then(res => {
						// console.log(res, 'submitInfo成功了');
						let order = res.data.message
						that.showPopup = false
						uni.showModal({
							title: that.$t('public.tips'),
							content: that.$t('public.success.detail'), 
							confirmText: that.$t('public.tips-check'),
							success(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/new_Shop/submitOrder/submitInfo?orderInfo=' +
											order
									})
								}else if (res.cancel) {
									
									return that.$util.Tips({
										title: this.$t('public.tips-canceled')
									});
								}

							}
						})


					}).catch(err => {
						console.log(err,'rrrrr');
						if(err=='代理金不足，购买失败'){
							that.$util.Tips({
								title: this.$t('auctionTips.2008')
							});
						}else{
							that.$util.Tips({
								title: this.$t('auctionTips.2007')
							});
						}
						
					});
				}).catch(res => {
					uni.hideLoading();
					that.$util.Tips({
						title:this.$t('mail.product.tips.pay-password-error')
					});
				});

			},

			getAddress() {
				console.log('9999999');
				let that = this
				getAddressList({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data.list;
					console.log(list,'listaaa');
					if(res.data.list.length==0){
						this.isAddress = false
					}else{
						let arr = []
						list.forEach(item => {
							if (item.isDefault) {
								return arr.push(item)
							}
						})
						console.log(arr[0],'arr[0].isDefault');
						if(arr[0] == undefined || arr[0].isDefault == false){
							that.$util.Tips({
								title:that.$t('public.address.default')
							});
						}else{
							this.isAddress = true
						}
						
						this.addressList = arr[0]
						
					}
					
				}).catch(err => {
					that.loading = false;
					that.loadTitle = this.$t('public.tips.load-more');
				});
			},
			exchange() {
				if(uni.getStorageSync('USER_INFO')){
					uni.navigateTo({
						url: '/pages/users/user_address_list/index'
					})
				}else{
					return this.$util.Tips({
							title: this.$t("login.please.login")
						})
				}
				
			},
			pay() {
				this.successInfo = 3
			},
			submit() {
				if(this.isAddress  == false){
					this.$util.Tips({
						title: this.$t('order.add.address')
					});
				}else{
					if (uni.getStorageSync("USER_INFO")) {
						this.showPopup = true
					} else {
					
						this.$util.Tips({
							title: this.$t('login.please.login')
						});
					
					}
				}
				

				// this.successInfo  = 2
			},
			detail(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.record_tit {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: 20px 0;
	}

	.address_btn {
		display: flex;
		justify-content: space-between;
		padding: 0 15px 0;
		margin-top: 25px;
	}

	.bottom {

		position: absolute;
		bottom: 10px;
		display: flex;
		/* height: 50px; */
		padding: 20px 0;
		width: 100%;
		background: #fff;
	}

	.bottom_btn {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding: 0 10px;
		height: 30px;

		.btn {
			height: 35px;
			padding: 5px 10px;
			margin: 0 5px;
			background-color: #169bd5;
		}
	}

	.txt_left {
		margin-right: 5px;
	}

	.txt_btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.actually {
		display: flex;
		justify-content: flex-end;
	}

	.title {
		/* display: flex; */
		/* justify-content: space-between; */
		margin-left: 10px;
		flex: 1;
		
	}

	.name {
		font-weight: 700;
		font-size: 19px
	}

	.price {
		color: #d9001b;
		font-weight: 700;
		font-size: 19px
	}

	.image {
		height: 150px;
		width: 150px;
		/* background: aqua; */
		image{
			width: 100%;
			height: 100%;
		}
	}

	.info {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
		/* height: 250px; */
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}

	.info_box {
		display: flex;
		justify-content: space-between;
		flex: 1
	}

	.img {
		/* background-color: aqua; */
		width: 56px;
		height: 40px;
		margin-right: 10px;
	}

	.card {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
	}

	.line {
		padding: 10px;
		display: flex;

	}

	.num {
		font-weight: bold;
	}

	.card_detail {
		margin: 5px 10px;
		padding: 10px 10px;
		/* height: 130px; */
		background-color: #fff;
		border-radius: 8px;

		span {
			font-weight: bold;
			font-size: 18px
		}
	}

	.tit {
		display: flex;
		/* justify-content: space-between; */
		margin: 10px 0;

		.pay_img {
			width: 250px;
			height: 150px;
			/* background-color: aqua; */
		}
	}
</style>